<template>
	<view>
		<!-- 头部提示 -->
		<navbar :backshow="false" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>

		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }">123</view>
		<!-- 预约box -->
		<view class="vybox">
			<view class="vyboxitem">

				<view class="fjicon">
					<img src="/static/fjicon.png" alt="" />
				</view>
				<view class="vydes">

					<view class="vytitle">
						预约房间
					</view>
					<view class="vtti">
						点击进行预约房间
					</view>
				</view>
				<view class="startiocn">
					<img src="/static/fjstart.png" alt="" />
				</view>

			</view>
			<view class="vyboxitem vyboxitems">
				<view class="fjicons">
					<img src="/static/devicon.png" alt="" />
				</view>
				<view class="vydes">
					<view class="vytitle">
						预约设备
					</view>
					<view class="vtti">
						点击进行预约设备
					</view>
				</view>
				<view class="startiocn">
					<img src="/static/sbstart.png" alt="" />
				</view>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="tjbox">
			<view class="tjtitle">数据统计</view>
			<view class="charts-boxs">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="zwdb"></view>
		<tabar current="1"></tabar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "XX预约",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 0,
				chartData: {},


				opts: {
					dataLabel: false,
					color: ["#5ADCA5", "#1371FF", "#FE811A", ],
					padding: [15, 15, 0, 5],
					enableScroll: false,

					legend: {
						position: 'top',

					},
					xAxis: {
						disableGrid: true,


					},
					yAxis: {
						showTitle: true,

						data: [

							{
								min: 0,
								title: '个',


							}
						]
					},
					extra: {
						column: {
							type: "stack",
							width: 30,
							fontSize: 0,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: 'center',


						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							legendShow: false,
						},
					}
				}
			}
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;

		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$myRequest({
					url: "/client/appointmentStatistics/audit",
					method: "GET",
				}).then((res) => {
					console.log("返回数据", res);
					if (res.code == 200) {
						// this.yldata = res.data;
						console.log("this.yl", res.data );
						let res = {
							categories: ["房间预约", "设备预约"],
							series: [{
									name: "目标值",
									textColor: "#FFFFFF",
									data: [35, 36, 31, 33, 13, 34]
								},
								{
									name: "完成量",
									textColor: "#FFFFFF",
									data: [18, 27, 21, 24, 6, 28]
								},
								{
									name: "成量",
									textColor: "#FFFFFF",
									data: [18, 27, 21, 24, 6, 28]
								}
							]
						};
						this.chartData = JSON.parse(JSON.stringify(res));
					}
				});

				//模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 		series: [{
				// 				name: "目标值",
				// 				textColor: "#FFFFFF",
				// 				data: [35, 36, 31, 33, 13, 34]
				// 			},
				// 			{
				// 				name: "完成量",
				// 				textColor: "#FFFFFF",
				// 				data: [18, 27, 21, 24, 6, 28]
				// 			},
				// 			{
				// 				name: "成量",
				// 				textColor: "#FFFFFF",
				// 				data: [18, 27, 21, 24, 6, 28]
				// 			}
				// 		]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
		}
	}
</script>

<style>

</style>